<template>
  <div>

    <mh></mh>

    <main class="" id="main-collapse">
      <div>
      
      
        <!--面包屑导航 通过：进行传参操作-->
        <bread :datas="this.datas">
         
        </bread>
        <!-- 展示检索结果 -->
        <div v-for="item in datalist">
          {{ item.title }}
          &nbsp;
          &nbsp;
          &nbsp;
          &nbsp;
          {{ item.desc }}
         


        </div> <br>
        
      </div>
    
    </main>

    

  

  </div>
</template>

<script>

import mh from './mh.vue'
// 导入面包屑导航组件
import bread from './bread.vue'
export default {
  data () {
    return {
      msg: "这是一个变量",
      //面包屑变量
      datas:[{'title':'首页',route:{name:'index'}},{title:'检索页面'}],
      title:'',
      desc:'',
      src:'',
      price:'',
      comment:'',
      id:0,
      commentlist:[] ,
      word:'',
      datalist:''                                                      
    }
  },
  components: {
    'mh':mh,
    //声明标签
    'bread':bread,
    
  },
  // 使用监听属性来监听路由的变化
  watch: {
    $route(to,from){

      // 刷新页面
      this.$router.go(0);
    }
  },
  mounted:function(){
    //接收参数
    var word = this.$route.query.word;
    console.log(word);
    //赋值
    this.word = word;

    this.datas[1].title = '检索页面';

    //发起请求

    //使用箭头函数
    this.axios.get('http://localhost:8000/courseSearch/',{params:{title:this.word}}).then((result) => {

      console.log(result);
      //赋值
      this.datalist = result.data;
    });

  },
  methods:{
    



  }
}


</script>
 
<style>



</style>